<template>
  <div class="page-common common-page">
    <!--评论组件-->
    <div class="post-common">
      <h3>提交评论</h3>
      <p></p>
      <textarea placeholder="请输入您要评论的内容" v-model="postContent.content"></textarea>
      <mt-button type="primary" size="large" @click="sendDate">发表</mt-button>
    </div>
    <!--<span>{{id}}</span>-->
    <!--2.0 实现获取评论数据列表-->
    <div id="list">
      <h3>评论列表</h3>
      <p class="p"></p>
      <div v-for="(item,index) in postList" :key="item.id">
        <div class="title">
          <span>第{{index + 1}}楼:</span>
          <span>用户：{{item.user_name}}</span>
          <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
        </div>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" v-text="item.content"></li>
        </ul>
      </div>
    </div>
    <!--3.0 实现获取更多按钮-->
    <mt-button type="danger" size="small" plain @click="getmore" class="getmore">加载更多</mt-button>
  </div>
</template>
<script>
  import { Toast } from 'mint-ui';
  export default {
    props: ["id"], //作用是用来接收父组件传入过来的id值
    data() {
      return {
//        postcontent : '',
        postContent:{
          user_name:'千山暮雪',
          add_time:new Date(),
            content:'',
        },  //获取用户评论内容
        postList: [], //评论数据的数组
        url: 'http://192.168.11.26:3000/mock/47/postcomment',
        url1:'http://192.168.11.26:3000/mock/47/geTcomments/:id?index',
        pageindex:1 , //代表获取api中的第几页评论数据
      }
    },
    components: {},
    methods: {
      getcommentlist(pageindex){
        pageindex = pageindex || 1;
//				1.0 确定评论数据的url
        var url1  = this.url1+ this.id+'?pageindex='+pageindex;
//				2.0 发出ajax请求获取数据即可
        this.axios.get(url1).then(res =>  this.postList = this.postList.concat(res.data.message))
//          if(res.data.status != 0 ){
//            Toast(res.data.message);
//            return;
//          }
//3.0 				将message数组中的数据赋值给this.list
      },
//        评论数据的提交
      sendDate(){
        if(this.postContent.content == ''){
          Toast('您要评论的内容不能为空');
          return;
        }
//          确定提交的地址,就是放到数据库去
//        获取到用户在文本框填写的内容，通过content：内容格式
        this.axios.post(this.url, this.postContent, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(res =>
            Toast(res.data.message) ,
//          3.0 将最新的评论数据追加到评论列表的最顶部
          this.postList.unshift(this.postContent),
//          this.postList = [{
//            "userName": "千山暮雪",
//            "add_time": new Date(),
//            "content": this.postcontent
//          }].concat(this.postList),
        //	4.0 将文本框中的评论内容清空
        this.postContent = {
          user_name:'千山暮雪',
          add_time:new Date(),
          content:'',
        }
      )
        console.log(this.postList);
      },
      /*加载分页数据*/
      getmore(){
        this.pageindex++;
//				2.0 获取当前this.pageindex值对应的分页数据
        this.getcommentlist(this.pageindex);
      }
    },
    created(){
//			1.0 获取当前资讯数据的评论信息列表
      this.getcommentlist(this.pageindex);
    }
  }
//  加载更多。就是实现分页加载数据
//  1,实现评论数据的提交  --设计静态结构  --发表按钮注册事件 postComment,实现数据的ajax请求
//   2，实现评论数据的获取
//  3，实现评论数据加载更多（也就是分页功能）
</script>
<style scoped>
  .post-common{
    padding:5px;
  }
  .post-common p{
    height: 1px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #c1c1c1;
  }
  .post-common textarea{
    font-size: .12rem;
    color:#666;
  }
  .getmore{
    margin-top: 20px;
    color:#6d6d72;
    border-color:#0062cc;
  }
</style>
